<!DOCTYPE HTML >
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>房间类型</title>
	<link rel="stylesheet" href="../../resource/weuimin.css" />
	<script src="../../template/js/jquery.js"></script>
	<script type="text/javascript" src="../../script/constants.js"></script>
	<script type="text/javascript" charset="UTF-8" src="../../script/naes.js"></script>
	<script src="../../script/api.js"></script>
    <style>
	    		* {
	        margin: 0;
		}

		.slider_wrap {
			margin-top:8%;
			position: relative;
			height: 28%;
			margin-bottom:0px;
			overflow: hidden;
		}

		.slider_wrap .slider_content {
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.slider_wrap .slider_item {
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.slider_wrap .slider_item img {
			border: 0;

			height: 100%;
		}

		.slider_wrap .slider_btn {
			width: 100%;
			height: 10px;
			position: absolute;
			bottom: 10px;
			left: 0;
			text-align: center;
		}

		.slider_wrap .slider_btnlist {
			width: 6px;
			height: 6px;
			border: 1px solid rgba(255,255,255,.8);
			display: inline-block;
			border-radius: 50%;
			margin: 5px;
		}

		.slider_wrap .slider_btnlist.curr {
			background: rgba(255,255,255,.8);
		}

		 .content li {
            padding-bottom: 10px;
            margin: 10px;
            border-bottom: 1px solid #D8D8D8;

        }

        .item, .text {
            display: -webkit-box;
        }


        .descr{
        	width: 100%;
        	height: 100%;

        	overflow: auto; /* auto | scroll */
    		-webkit-overflow-scrolling: touch;
        }
        .text {
            -webkit-box-flex: 1;
            -webkit-box-orient: vertical;
            margin: 0 5px;

        }

        .text-price {
            padding: 2px 0;
        }

        .new-price {
            font-size: 20px;
            color: #ff7c70;
            font-family: Impact, Arail, sans-serif;
            font-weight: bold;
        }

        .text-price del, .icon-heart {
            margin-left: 15px;
        }

        .text-price del, .icon-people + span, .icon-heart + span {
            color: #8c8c8c;
            font-size: 10px;
        }

        .icon {
            background-size: 12px;
            background-position: center center;
            background-repeat: no-repeat no-repeat;
            display: inline-block;
            height: 12px;
            width: 12px;
        }

        .icon-people {
            background-image: url("../image/dock_icon_my_tuniu@2x.png");
        }

        .icon-heart {
            background-image: url("../image/heart@2x.png");
        }

    	.infoAndMap {
    		width:100%;
    		height:100%;

    	}
		.mainInfo {
			width: 50%;

			font-weight:500;
			font-size:medium;
			font-style:normal;
			padding-left:10px;
			padding-right:10px;

			border-right: 2px solid #005DA9;
		}
		.iam {
			margin-top:-23px;
			width: 100%;
			height: 180px;
			border-bottom: 2px solid #005DA9;
		}
		.buildings {

			width: 100%;
			height: auto;
			border-bottom: 2px solid #005DA9;
		}
		.sjxx{
			width: 100%;
			height: auto;
			border-bottom: 2px solid #005DA9;

		}
		.jrjztb{

			position :absolute;
			right:10px;
			width:65px;
			height:25px;
			background-color:#F99D1C;
			margin-top:20px;
			border-radius:4px 4px 0 0;
			border:1px solid #F99D1C;

			text-align:center;
			color: #FFFFFF;



		}
		.zxf{
			position :absolute;
			right:10px;
			width:65px;
			height:15px;
			background-color:#EFE8E8;
			margin-top:45px;
			border-radius:0 0 4px 4px;
			border:1px solid #F99D1C;
			line-height:15px;
			font-size:smaller;
			text-align:center;
			color: #F99D1C;
		}
    </style>
</head>
<body style="background: #f1f1f1;">
<header id="statusBar">
        <div style="height:75px;background: #298cb4;display: table;width: 100%;">
           <div style="height:50px;margin-top: 25px;line-height: 50px;color: #ffffff;background: #1e6887;">
               <div style="z-index: 999;margin-left: 10px;position: absolute;" onclick="api.closeWin();">
	           返回
	           </div>
	           <div style="text-align: center;font-weight:bold;width: 100%;">
	           酒店预订
	           </div>
           </div>
        </div>
	</header>

    <!--<div class="slider_wrap"> 
        <div id="pics" class="slider_content"> 
           
        </div> 
    </div>  -->
<div style="background: #ffffff;width: 100%;margin: 0 auto;display: table;padding-top: 20px;margin-bottom: 20px;">
		   <div>
		      <div id="hotel_name" style="text-align: center;height: 40px;line-height: 40px;font-weight:bold;font-size: 20px;">

		      </div>
		      <div id="hotel_pic" style="height:200px;width:70%;margin: 0 auto;">

		      </div>
		      <div>
		         <table style="margin: 0 auto;" cellspacing="5">
		         <tr>
		          <td style="width: 25%;">联系电话</td><td id="hotel_phone"></td>
		         </tr>
		         <tr>
		           <td style="width: 25%;">酒店地址</td><td id="hotel_addr"></td>
		         </tr>
		         </table>
		      </div>
		      <div style="width:90%;height:100px;margin: 0 auto;" id="hotel_position" onclick="openMap();">
		      </div>
		   </div>
		   <div>
		   </div>
</div>

	<div class="buildings" >
		<div class="sjxx">

		</div>
		<div id="lcxx"  style="width: 100%;height: auto;">
			<ul class="content" id="fjlx">


			</ul>
		</div>
	</div>
	<div id="loadingToast" style="display:none;">
			<!--<div class="weui-mask_transparent"></div>
			<div class="weui-toast">
				<i class="weui-loading weui-icon_toast"></i>
				<p class="weui-toast__content">数据加载中...</p>
			</div>-->
	</div>
</body>

<script type="text/javascript">
	var jddz="";
	var hotelName = "";
	var stDate = "";
	var edDate = "";
	apiready = function(){
	    stDate = api.pageParam.startDate;
	    edDate = api.pageParam.endDate;
	    api.addEventListener({
		    name: 'closeMappage'
		}, function(ret, err) {
		    var map = api.require('bMap');
                map.getCoordsFromName({
			    address: jddz
			}, function(res, err) {
			var os = $api.offset($api.dom('#hotel_position'));
            var h = $("#hotel_position").height();
            var w = $("#hotel_position").width();
			    if (res.status) {
			        map.open({
					    rect: {
					        x: os.l,
					        y: os.t,
					        w: w,
					        h: h
					    },
					    center: {
					        lon: res.lon,
					        lat: res.lat
					    },
					    zoomLevel: 15,
					    showUserLocation: false,
					    fixed: false
					}, function(r) {
					    if (r.status) {
					        //alert('地图打开成功');
					        map.addAnnotations({
							    annotations: [{
							        id: 1,
							        lon: res.lon,
					                lat: res.lat
							    }],
							    icon: '',
							    draggable: false
							}, function(tt) {
							    if (tt) {
							        //alert(ret.id);
							    }
							});
					    }
					});
			    }
			});
		});
		var id = api.pageParam.id;
		var jqCode = api.pageParam.jqCode;
		$api.setStorage('jdid',id);
		$("#loadingToast").show();
        var callback = function(ret, err){
            console.log(JSON.stringify(ret));
        	var data = eval("("+ret.list+")");
        	var json=JSON.stringify(data);
        	var pic = new Array();
        	for(var m=0;m<data.picUrl.length;m++){
        	    pic.push(data.picUrl[m].URL);
        	}
        	var html = "";
        	$("#hotel_name").html(data.name);
        	$("#hotel_phone").html(data.phone);
        	$("#hotel_addr").html(data.dzqc);
        	hotelName = data.name;
        	jddz = data.dzqc;
			var map = api.require('bMap');
			map.getCoordsFromName({
			    address: data.dzqc
			}, function(res, err) {
			var os = $api.offset($api.dom('#hotel_position'));
            var h = $("#hotel_position").height();
            var w = $("#hotel_position").width();
			    if (res.status) {
			        map.open({
					    rect: {
					        x: os.l,
					        y: os.t,
					        w: w,
					        h: h
					    },
					    center: {
					        lon: res.lon,
					        lat: res.lat
					    },
					    zoomLevel: 15,
					    showUserLocation: false,
					    fixed: false
					}, function(r) {
					    if (r.status) {
					        //alert('地图打开成功');
					        map.addAnnotations({
							    annotations: [{
							        id: 1,
							        lon: res.lon,
					                lat: res.lat
							    }],
							    icon: '',
							    draggable: false
							}, function(tt) {
							    if (tt) {
							        //alert(ret.id);
							    }
							});
					    }
					});
			    }
			});
            var offset = $api.offset($api.dom('#hotel_pic'));
            var height = $("#hotel_pic").height();
            var width = $("#hotel_pic").width();
            var UIScrollPromptView = api.require('UIScrollPromptView');
				UIScrollPromptView.open({
				    rect: {
				        x: offset.l,
				        y: offset.t,
				        w: width,
				        h: height
				    },
				    data: {
				        paths: pic,
				        captions: [],
				        prompts: []
				    },
				    styles: {
				        caption: {
				            height: 35,
				            color: '#E0FFFF',
				            size: 13,
				            bgColor: '#696969',
				            position: 'bottom'
				        },
				        indicator: {
				            align: 'center',
				            color: '#FFFFFF',
				            activeColor: '#298cb4'
				        },
				        prompt: {
				            button: {
				                normal: '',
				                highlight: '',
				                x: 0,
				                y: 100,
				                w: 60,
				                h: 40
				            },
				            x: 0,
				            y: 50,
				            w: 160,
				            h: 90,
				            contentMode: 'scaleToFill',
				            animation: true
				        }
				    },
				    placeholderImg: '',
				    contentMode: 'scaleToFill',
				    interval: 3,
				    fixedOn: '',
				    loop: true,
				    fixed: false
				}, function(ret) {
				    if (ret) {
				        //alert(JSON.stringify(ret));
				    }
				});

        	var pics = document.getElementById("pics");
        	$api.html(pics, html);
//      	var date = getNowFormatDate();
//      	var nowTime = document.getElementById('nowTime');
//			$("#nowTime").val(date);
//			$api.attr(nowTime, 'min', date);
        	var picUrl = data.picUrl;
        	$("#phone").text('电话：'+data.phone);
        	$("#dzqc").text(data.dzqc);

        	var mainInfo = document.getElementById('mainInfo');
        	var jstitle = document.getElementById('jstitle');
        	$api.text(jstitle, data.name);
        	$api.text(mainInfo, data.descr);

        var cback = function(ret, err){
        	var data = eval("("+ret.list+")");
        	var json=JSON.stringify(data);
        	var html = "";
        	for(var i=0;i<data.length;i++){
//      	    if(data[i].picUrl.length == 0){
//      	       continue;
//      	    }
        		var picUrl = new Array();
        		for(var n = 0;n<data[i].picUrl.length;n++){
        		   picUrl.push(data[i].picUrl[n].URL);
        		}
        		var breakfast = "";
        		var bed = "";
        		var window = "";
        		if(typeof(data[i].BREAKFAST) != "undefined"){
        		  breakfast = data[i].BREAKFAST+"&nbsp;|&nbsp;";
        		}else{
        		  breakfast = "";
        		}
        		if(typeof(data[i].BED_TYPE) != "undefined"){
        		  bed = data[i].BED_TYPE+"&nbsp;|&nbsp;";
        		}else{
        		  bed = "";
        		}
        		if(typeof(data[i].WINDOW) != "undefined"){
        		  window = data[i].WINDOW+"&nbsp;|&nbsp;";
        		}else{
        		  window = "";
        		}
        		html += '<li>'+
						        '<div id="delete" class="item" style="width:100%;">'+

						            '<div class="img" onclick=toDetail("'+id+'","'+data[i].ID+'","'+data[i].NAME+'")>'+
						                '<img src="'+picUrl[0]+'" style="width:80px;height:80px;">'+
						            '</div>'+
						            '<div class="text" style="width:100%;" onclick=toDetail("'+id+'","'+data[i].ID+'","'+data[i].NAME+'")>'+
						                '<div class="text-title" style="font-size:large;color: #000000;">'+data[i].NAME+'</div>'+
						               '<div style="width:100%;" >'+bed+'<span>'+window+'&nbsp;</span>';
						               if(data[i].BREAKFAST!="无"){
						               		html += '<span>'+breakfast+'</span>';
						               }

						       html += '&nbsp;&nbsp;&nbsp;&nbsp;'+
						               '</div>'+
						                '<div class="text-price">'+
						                    '<span class="new-price">￥'+data[i].PRICE+'</span>'+

						                '</div>'+

						            '</div>'+

						            '<div id="'+id+'"  class="jrjztb" onclick=openJztb("'+id+'","'+data[i].NAME+'","'+data[i].ID+'")>预订</div>'+
						        	'<div id="'+id+'"  class="zxf" onclick=openJztb("'+id+'","'+data[i].NAME+'","'+data[i].ID+'")>在线付</div>'+
						        '</div>'+

						    '</li>';
        	}
        	$("#fjlx").html(html);
            }
	    var parame = {"jdid":id};
	    apiAjax(JSON.stringify(parame),url.jdfjlx,cback);
				// 默认设置 
       		$("#loadingToast").hide()
       	}
	    var parameter = {"id":id};
	    apiAjax(JSON.stringify(parameter),url.jddetail,callback);
        //});
	};

	function toDetail(jdid,roomTypeId,roomTypeName){

			var width = document.documentElement.clientWidth;
	 		var height = document.documentElement.clientHeight;
	 		var xzdate = $("#nowTime").val();
      		api.openFrame({
	        name: 'room_info',
	        url: './room_info.html',
	        rect: {
		        x:0,
		        y:180,
		        w:width,
		        h:height-180
	        },
	        pageParam:{
	        	roomTypeId:roomTypeId,
	        	jdid:jdid,
	        	roomTypeName:roomTypeName,
	        	xzdate:xzdate,
	        	stDate:stDate,
	        	edDate:edDate
	        }
        	});
        	return false;
	}
	function openJztb(jdid,name,tpid){
		var xzdate = $("#nowTime").val();
		$api.setStorage('xzdate' , xzdate);
		api.openWin({
	        name: 'hotel_jztb',
	        url: 'hotel_jztb.html',
	        pageParam:{
	        	id:jdid,
	        	name:hotelName,
	        	xzdate:xzdate,
	        	typeid:tpid,
	        	stDate:stDate,
	        	edDate:edDate
	        }

        });
	}
	function getNowFormatDate() {

   		var now = new Date();
		//alert(now.getDate()+'-'+now.getMonth());
		//格式化日，如果小于9，前面补0
		var day = ("0" + now.getDate()).slice(-2);
		//格式化月，如果小于9，前面补0
		var month = ("0" + (now.getMonth() + 1)).slice(-2);
		//拼装完整日期格式
		var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
		//完成赋值
		return today;

	}
	//打开全屏地图
	function openMap(){
	    var map = api.require('bMap');
            map.close();
		api.openWin({
	        name: 'baidumap',
	        url: './baidumap.html',
	        pageParam:{
	        	name:jddz
	        }
        });
	}

</script>
</html>
